import React from 'react'
import {Outlet,NavLink} from 'react-router-dom'
import { mainRouter } from '../router/routerConfig'
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons';
function Home() {
  return (
    <div className='Hoems'>
        <header>
          头部数据
        </header>
        <main>
          <Outlet></Outlet>
        </main>
        <footer>
        <Tabbar>
          {
            mainRouter.length ? mainRouter.map((item,index)=>{
              return  <Tabbar.Item icon={<HomeO />} key={index}>
                <NavLink to={item.path}>{item.title}</NavLink>
              </Tabbar.Item>
            }):'暂无数据'
          }
          {/* <Tabbar.Item icon={<HomeO />}>标签</Tabbar.Item>
          <Tabbar.Item icon={<Search />}>标签</Tabbar.Item>
          <Tabbar.Item icon={<FriendsO />}>标签</Tabbar.Item>
          <Tabbar.Item icon={<SettingO />}>标签</Tabbar.Item> */}
        </Tabbar>
        </footer>
    </div>
  )
}

export default Home